<template>
  <el-container >
    <el-header>
        <h1 align="center">题库管理</h1>
    </el-header>
    <el-main>
      <el-form :inline="true" :model="queryParam" class="demo-form-inline">
        <el-form-item label="题目">
          <el-input v-model="queryParam.quName" placeholder="题目"></el-input>
        </el-form-item>
        <el-form-item label="题型">
          <el-select v-model="queryParam.quType" placeholder="题型">
            <el-option label="单选题" value="单选题"></el-option>
            <el-option label="多选题" value="多选题"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="loadQuestion" >查询</el-button>
        </el-form-item>
      </el-form>

        <el-table :data="list" style="width: 100%">
            <!--列名-->
          <el-table-column prop="quId" label="编号"></el-table-column>
          <el-table-column prop="quName" label="题目"></el-table-column>
          <el-table-column prop="quA" label="A选项"></el-table-column>
          <el-table-column prop="quB" label="B选项"></el-table-column>
          <el-table-column prop="quC" label="C选项"></el-table-column>
          <el-table-column prop="quD" label="D选项"></el-table-column>
          <el-table-column prop="quType" label="题型"></el-table-column>
          <el-table-column  label="操作">
            <template slot-scope="scope">
              <el-button size="mini" v-my-power="role" >编辑</el-button>
              <el-button size="mini" type="danger">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      <!-- size-change 下拉框选中触发的事件-->
      <!-- current-change 页码改变触发的事件-->
      <!-- current-page 当前页码-->
      <!-- page-sizes 下拉框显示条数-->
      <!-- page-size 每页显示条数-->
      <!-- layout 分页组件的布局面板-->
      <!-- total 总条数-->
      <el-pagination
      @size-change="selectChange"
      @current-change="currentChange"
      :current-page="queryParam.page"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="queryParam.row"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>


    </el-main>

  </el-container>
</template>

<script>
    export default {
        name: "Question",
        data(){
          return{
              list:[],//当前页集合
              total:0,//总条数
              totalPage:0,//总页数
              queryParam:{ //请求参数
                    quType:"",
                    quName:"",
                    page:1,
                    row:5
              },
             role:"admin"


          }
        },
       methods:{
           //加载题库列表
           loadQuestion(){
                const  _this = this;
                this.$http.get("/question/question",{params:this.queryParam})
                .then(function (rs) {
                  console.log(rs.data);
                    if(rs.data.code==200){
                      _this.list= rs.data.list;
                      _this.total= rs.data.total;
                      _this.totalPage= rs.data.totalPage;
                    }
                })
           },
         selectChange(row){//下拉框触发的事件
             //更改当前选中每页显示行数
            this.queryParam.row = row;
            //刷新
            this.loadQuestion();
         },
         currentChange(page){//当前页码触发的事件
             this.queryParam.page = page;
             this.loadQuestion();
         }

       },
        mounted() {
            this.loadQuestion();
        }
    }
</script>

<style scoped>

  .el-header {
    background-color: white;
    color: black;


  }
</style>
